<template>
  <div class="settled">
    <div class="settled_main">
      <div class="nav" :style="{ backgroundColor: navbgc }">
        <div class="nav_main">
          <logo :bgc="istwenty ? 1 : 2"></logo>
          <el-menu
            :default-active="activeIndex"
            router
            :text-color="istwenty ? '#000' : '#dbdbdb'"
            :active-text-color="istwenty ? '#000' : '#fff'"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/cooperation">商家合作</el-menu-item>
            <el-menu-item index="/settled">招商入驻</el-menu-item>
            <el-menu-item index="/help">帮助中心</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="banner">
        <div class="swiper1">
          <swiper
            ref="mySwiper1"
            class="swiper-no-swiping"
            :options="swiperOptions1"
          >
            <swiper-slide v-for="(item, index) in imgList" :key="index">
              <div
                :style="{
                  background: 'url(' + item + ') no-repeat',
                  backgroundSize: '100% 100%',
                  width: '100%',
                  height: '100%',
                  userSelect: 'none'
                }"
              >
                <div
                  :style="{
                    background: 'url(' + item + ') no-repeat',
                    backgroundSize: '100% 100%',
                    width: '1930px',
                    height: '680px',
                    margin: '0 auto'
                  }"
                ></div>
              </div>
            </swiper-slide>
            <!-- <div class="swiper-paginations s1" slot="pagination"></div> -->
          </swiper>
        </div>
      </div>
      <div class="title">
        <p>上万招商京粉团队入驻平台</p>
        <div class="triangle"></div>
      </div>
      <!-- <div class="times_lists">
        <div class="item_box">
          <div class="item_content">
            <i class="settled_icon ic1"></i>
            <p class="t1">超5W+互力公众号</p>
            <p class="t2">CMS商城实时同步</p>
          </div>
          <div class="item_bg bg1"></div>
        </div>
        <div class="item_box">
          <div class="item_content">
            <i class="settled_icon ic2"></i>
            <p class="t1">每天数万买家京粉</p>
            <p class="t2">在线搜索找好单</p>
          </div>
          <div class="item_bg bg2"></div>
        </div>
        <div class="item_box">
          <div class="item_content">
            <i class="settled_icon ic3"></i>
            <p class="t1">蜂客爆款群及互力微信</p>
            <p class="t2">精编采集源同步采集</p>
          </div>
          <div class="item_bg bg3"></div>
        </div>
        <div class="item_box">
          <div class="item_content">
            <i class="settled_icon ic4"></i>
            <p class="t1">上百家软件及APP导购</p>
            <p class="t2">平台API对接同步</p>
          </div>
          <div class="item_bg bg4"></div>
        </div>
      </div> -->
      <div class="goods_show">
        <div class="goods_main">
          <!-- <div class="show_box">
            <img
              :src="
                showgoods === 1
                  ? '//img.letuilm.com/2020/07/a5072a202007291501359712.png'
                  : showgoods === 2
                    ? '//img.letuilm.com/2020/07/3ed3fe2020072915022452713.png'
                    : showgoods === 3
                      ? '//img.letuilm.com/2020/07/fdc41f2020072915025232103.png'
                      : '//img.letuilm.com/2020/07/6b4f2f202007291503183471.png'
              "
              alt=""
              srcset=""
            />
          </div> -->
          <div class="btn_box">
            <el-radio-group v-model="showgoods">
              <el-radio :label="1">
                <div class="show_btn">
                  <i class="btn_icon icon1"></i>
                  <div>
                    <p class="t_top">实时跑单</p>
                    <p class="t_bot">最近2小时出单排行数据，快速找单好单</p>
                  </div>
                </div>
              </el-radio>
              <el-radio :label="2">
                <div class="show_btn">
                  <i class="btn_icon icon2"></i>
                  <div>
                    <p class="t_top">视频单</p>
                    <p class="t_bot">商品脱颖而出，更有趣的找好单</p>
                  </div>
                </div>
              </el-radio>
              <el-radio :label="3">
                <div class="show_btn">
                  <i class="btn_icon icon3"></i>
                  <div>
                    <p class="t_top">预告单</p>
                    <p class="t_bot">新单预告，提前预热，提高转化</p>
                  </div>
                </div>
              </el-radio>
              <el-radio :label="4">
                <div class="show_btn">
                  <i class="btn_icon icon4"></i>
                  <div>
                    <p class="t_top">爆单榜</p>
                    <p class="t_bot">每天不定期上新，最新爆款好单</p>
                  </div>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="newsfunction">
        <div class="show_top">
          <p>新功能上线</p>
          <i></i>
          <span>京粉客坚持每天为京粉提供全网优质商品 </span>
        </div>
        <div class="show_bot">
          <div class="icon_box">
            <i class="showicon icon1"></i>
            <span>优化好单指数评判逻辑维度</span>
          </div>
          <div class="icon_box">
            <i class="showicon icon2"></i>
            <span>支持发布过夜单&预告单</span>
          </div>
          <div class="icon_box">
            <i class="showicon icon3"></i>
            <span>支持发布直播单&视频单</span>
          </div>
          <div class="icon_box">
            <i class="showicon icon4"></i>
            <span>支持发布招商团长营销计划</span>
          </div>
          <div class="icon_box">
            <i class="showicon icon5"></i>
            <span>上线好单置顶高级服务版块</span>
          </div>
          <div class="icon_box">
            <i class="showicon icon6"></i>
            <span>上线爆单榜及问候语版块</span>
          </div>
          <div class="icon_box">
            <i class="showicon icon7"></i>
            <span>上线京粉客招商商品管理助手</span>
          </div>
          <div class="icon_box">
            <img
              :src="require('@/assets/imgs/clock.png')"
              class="icon8"
              alt=""
            />
            <span>上线快抢商品版块</span>
          </div>
          <div class="icon_box">
            <img
              :src="require('@/assets/imgs/star.png')"
              class="icon9"
              alt=""
              srcset=""
            />
            <span>上线达人说文章版块</span>
          </div>
        </div>
      </div>
      <div class="info_box">
        <div class="about">
          <img
            :src="require('@/assets/imgs/mark.png')"
            class="img1"
            alt=""
            srcset=""
          />

          京粉客未来会持续的通过累计产品历史数据，通过多维度数据模型，对一个产品进行预判好单指数，希望能够把新发布的好单浮出水面，提供给跑单京粉更方便的挑选！未来，京粉客不断加强内容的同时，会不断优化数据模型，真正第一时间让招商京粉的好单浮出水面，帮助跑单京粉更好的挑选好单！一场新的产品库革命，会从京粉客发起，我们期待与广大京粉携手实现好单的价值浮现！

          <img
            :src="require('@/assets/imgs/mark.png')"
            class="img2"
            alt=""
            srcset=""
          />
        </div>
      </div>
      <div class="sidebar" v-if="$route.name!=='allgoods'&&$route.name!=='realtimelist'" >
        <!-- <div class="pagebox">{{ currentPage }}/{{ max_page }}</div> -->
        <div class="btns">
          <!-- <p @click="gonext(1)">
          向上一页
        </p>
        <p @click="gonext(2)">
          向下一页
        </p> -->
          <p>
            <router-link to="/help">
              帮助中心
            </router-link>
          </p>
          <p>
            建议反馈
          </p>
          <p>
            <a href="tencent://message/?Site=dounm.com&uin=756589657&Menu=yes" target="_blank" rel="noopener noreferrer">联系客服</a> 
          </p>
        <!-- <p>
          一键复制
        </p> -->
        </div>
        <backtop
          transitionName="fade"
          :customStyle="backtopStyle" 
          :visibilityHeight="0" 
          :backPosition="0"
        ></backtop>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import moment from 'moment'
import logo from '@/components/logo.vue'
import footerbox from '@/components/footerbox.vue'
import backtop from '@/components/backtop'

import { getCachelist } from '@/api/cache'

export default {
  name: 'Cooperation',
  components: {
    logo,
    footerbox,
    backtop
  },
  data() {
    return {
      moment,
       backtopStyle: {
        'right': '100px',
        'bottom': '150px',
        'width': '40px',
        'height': '40px',
        'border-radius': '20px',
        'line-height': '40px', 
        'background': '#fff'
      },
      showgoods: 1,
      imgList: [
        '//img.letuilm.com/settled.png'
      ],
      istwenty: false,
      navbgc: 'transparent',
      activeIndex: '/settled',
      form: {
        goods_num: 0,
        shop_num: 0,
        coupon_num: 0,
        price: 0,
        top_array: [
          {
            id: '',
            count: '',
            create_at: '',
            fraction: 100,
            level: '',
            nickname: '',
            qq: '',
            team_desc: '',
            user_img: '',
            sort: ''
          },
          {
            id: '',
            count: '',
            create_at: '',
            fraction: 100,
            level: '',
            nickname: '',
            qq: '',
            team_desc: '',
            user_img: '',
            sort: ''
          },
          {
            id: '',
            count: '',
            create_at: '',
            fraction: 100,
            level: '',
            nickname: '',
            qq: '',
            team_desc: '',
            user_img: '',
            sort: ''
          }
        ]
      },
      searchshow: false,
      name: '', //用户名
      logined: this.$ls.get('token') ? true : false,
      searchipt: '', //搜索
      swiperOptions1: {
        observer: true,
        observeParents: true,
        // initialSlide: 2, //初始索引
        autoplay: {
          delay: 6000
        },
        effect: 'fade',
        pagination: {
          el: '.s1',
          // dynamicBullets: true,
          clickable: true
        }
        // navigation: {
        //   nextEl: '.nexts4',
        //   prevEl: '.prevs4'
        // }
      }
    }
  },
  watch: {},
  computed: {},
  created() {
    if (this.$ls.get('userinfo')) {
      this.logined = true
      this.name = this.$ls.get('userinfo').nickname
    }
    if (this.$ls.get('search')) {
      // console.log(this.$ls.get("search"));
      this.searchipt = this.$ls.get('search')
    }
    this.getCachelist()
  },
  mounted() {
    // this.$router.afterEach(() => {
    //   // to, from, next
    //   window.scrollTo(0, 0)
    // })
    window.addEventListener('scroll', this.showIpt)
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    //获取商家合作榜虚拟
    getCachelist() {
      getCachelist()
        .then(res => {
          if (res.code == 200) {
            console.log('商家合作榜返回', res)
            this.form = res.data
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    dologinout() {
      this.$ls.clear()
      if (this.$route.name === 'homepage') {
        this.$refs.allgoods.logined = false
      }
      this.$message.success('退出成功')
      this.logined = false
    },
    clearsearch() {
      this.searchipt = ''
      this.$ls.remove('search')
      if (this.$route.name === 'allgoods') {
        this.$refs.allgoods.closetags('search')
        this.$refs.allgoods.getGoodsList()
      }
    },
    showIpt() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 20
      ) {
        // 页面高度大于20执行操作;
        this.navbgc = '#fff'
        this.istwenty = true
      } else {
        this.navbgc = 'transparent'
        this.istwenty = false
      }
    },
    dosearch() {
      console.log(this.searchipt)
      // console.log(this.$route);
      if (this.searchipt == '') {
        this.$ls.remove('search')
      }
      if (this.$route.name === 'allgoods') {
        this.$refs.allgoods.search({
          search: this.searchipt
        }) // 调用子组件的方法childClick
        // this.$router.go(0);
      } else {
        this.$router.push({
          path: '/cooperation/allgoods'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.settled {
  width: 100%;

  .settled_main {
    // width: 1280px;
    margin: 0 auto;

    .nav {
      width: 100%;
      position: fixed;
      top: 0;
      margin: 0 auto;
      z-index: 2;

      .nav_main {
        width: 1280px;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;

        /deep/.el-menu {
          background-color: transparent;
        }

        /deep/.el-menu-item {
          color: #c7c7c7;
        }

        /deep/.el-menu.el-menu--horizontal {
          border: none;
        }

        /deep/.el-menu-item:hover {
          color: white;
          background-color: transparent;
          border-bottom: 2px solid #ddd !important;
        }

        /deep/.is-active {
          border-bottom: 2px solid #ddd !important;
        }
      }
    }

    .banner {
      width: 100%;
      height: 680px;

      //  background-color: blue;
      .swiper1 {
        /deep/.s1 {
          position: absolute;
          z-index: 3;

          .swiper-pagination-bullet {
            width: 13px;
            height: 13px;
            background: #93afff;
            opacity: 1;
            margin: 0 10px !important;
          }

          .swiper-pagination-bullet:focus {
            outline: aqua;
          }

          .swiper-pagination-bullet-active {
            background-color: #fff;
          }
        }
      }
    }

    .title {
      height: 150px;
      line-height: 150px;
      background: #f5f5f5;
      color: #607afc;
      font-size: 36px;
      font-weight: 600;
      position: relative;

      .triangle {
        position: absolute;
        top: 0;
        left: calc(50% - 20px);
        width: 30px;
        height: 150px;
        border-top: 20px solid #00a2d3;
        border-bottom: 20px solid #313b50;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
      }
    }

    .times_lists {
      width: 100%;
      height: 350px;
      background-color: #323c51;
      display: flex;
      justify-content: center;
      align-content: flex-start;
      .item_box {
        position: relative;
        width: 275px;
        height: 350px;
        overflow: hidden;

        .item_content {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          z-index: 1;
          color: white;

          .settled_icon {
            width: 132px;
            height: 132px;
            display: block;
            background-image: url('~@/assets/imgs/settledicon.png');
            background-repeat: no-repeat;
            margin: 80px auto 20px;
          }

          .ic1 {
            background-position: -160px 0;
          }
          .ic2 {
            background-position: -160px -134px;
          }
          .ic3 {
            background-position: -294px 0;
          }
          .ic4 {
            background-position: -294px -134px;
          }

          // .t1 {
          // }

          // .t2 {
          // }
        }

        .item_bg {
          width: 100%;
          height: 100%;
          transition: transform 1.5s;
        }

        .bg1 {
          background: url('~@/assets/imgs/item_bg1.png') no-repeat center center;
          background-size: 275px 350px;
        }
        .bg2 {
          background: url('~@/assets/imgs/item_bg2.png') no-repeat center center;
          background-size: 275px 350px;
        }
        .bg3 {
          background: url('~@/assets/imgs/item_bg3.png') no-repeat center center;
          background-size: 275px 350px;
        }
        .bg4 {
          background: url('~@/assets/imgs/item_bg4.png') no-repeat center center;
          background-size: 275px 350px;
        }
      }

      .item_box:hover {
        .item_bg {
          transform: scale(1.2);
        }
      }
    }
    .goods_show {
      width: 100%;
      background-color: #fff;
      padding-bottom: 100px;
      .goods_main {
        width: 1100px;
        background: url('~@/assets/imgs/showgoods_bg.png') no-repeat center top;
        background-size: cover;
        margin: 0 auto;
      }
      .show_box {
        width: 1100px;
        height: 750px;
        margin: 0 auto;
        background: url('~@/assets/imgs/computer_bg.png') no-repeat center 80px;
        background-size: 1040px 600px;
        position: relative;
        img {
          position: absolute;
          width: 790px;
          height: 494px;
          top: 117px;
          left: 155px;
        }
      }
      .btn_box {
        padding-top:30px;
        /deep/.el-radio__input {
          display: none;
        }
        /deep/.is-checked {
          .show_btn {
            background: #607afc !important;
            color: white;
            .icon1 {
              background-position: -58px -100px;
            }
            .icon2 {
              background-position: -58px -158px;
            }
            .icon3 {
              background-position: -58px -218px;
            }
            .icon4 {
              background-position: -58px -44px;
            }
          }
        }
        /deep/.el-radio-group {
          width: 1200px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }
        .show_btn {
          width: 540px;
          height: 100px;
          background: #eef0ff;
          color: #333333;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          cursor: pointer;
          text-align: left;
          margin-right: 20px;
          .btn_icon {
            width: 56px;
            height: 56px;
            margin: 0 20px;
            display: inline-block;
            background-image: url('~@/assets/imgs/settledicon.png');
            background-repeat: no-repeat;
          }
          .icon1 {
            background-position: -58px -100px;
          }
          .icon2 {
            background-position: 0 -158px;
          }
          .icon3 {
            background-position: 0 -218px;
          }
          .icon4 {
            background-position: 0 -44px;
          }
          .t_top {
            font-size: 18px;
            margin-bottom: 0.5rem;
          }
          .b_top {
            font-size: 16px;
          }
        }
        .show_btn:hover {
          background: #9eaaff;
          transition: all 0.2s;
        }
      }
    }
    .newsfunction {
      width: 100%;
      height: 688px;
      // background-color: #FFFFFF;
      .show_top {
        padding: 80px 0;
        margin: 0 !important;
        p {
          font-size: 24px;
          font-weight: 800;
          color: #607afc;
        }
        i {
          display: block;
          width: 100px;
          height: 2px;
          background: #607afc;
          margin: 20px auto;
        }
        span {
          font-size: 24px;
          color: #333;
        }
      }
      .show_bot {
        width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .icon_box {
          width: 366px;
          margin-bottom: 40px;
          display: flex;
          align-items: center;
          .showicon {
            width: 70px;
            height: 70px;
            display: inline-block;
            background-image: url('~@/assets/imgs/settledicon.png');
            background-repeat: no-repeat;
          }
          .icon1 {
            background-position: 0 -280px;
          }
          .icon2 {
            background-position: -72px -280px;
          }
          .icon3 {
            background-position: -144px -280px;
          }
          .icon4 {
            background-position: -216px -280px;
          }
          .icon5 {
            background-position: -288px -280px;
          }
          .icon6 {
            background-position: -360px -280px;
          }
          .icon7 {
            background-position: -432px -280px;
          }
          .icon8 {
            width: 70px;
            height: 70px;
          }
          .icon9 {
            width: 70px;
            height: 70px;
          }
          span {
            margin-left: 20px;
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
    .info_box {
      width: 100%;
      // background:url('~@/assets/imgs/founder_bg.png') no-repeat center;
      background: url('//img.letuilm.com/2020/07/6e62832020072914584843987.png')
        no-repeat center;
      background-size: 100% 100%;
      text-align: left;
      .about {
        width: 1100px;
        margin: 0 auto;
        padding: 60px;
        color: white;
      }
      .img1 {
        width: 26px;
        height: 26px;
        transform: rotate(180deg);
      }
      .img2 {
        width: 26px;
        height: 26px;
      }
    }
       .sidebar {
      position: fixed;
      top: 50%;
      right: 20px;
      // border: 1px solid #E7E7E7;
      margin: 10px 0;
      width: 50px;
      border-radius: 3px;
      box-shadow: 0 0 6px #eee;
      .pagebox{
        width: 100%;
        color: #4d75ff;
        font-size: 14px;
        padding-bottom: 6px;
        text-align: center;
        background-color: #F6F6F6;
      }
      .btns{
        display:flex;
        flex-wrap:wrap;
        background-color: #fff;
      }
      /deep/.el-icon-download{
        transform: rotate(180deg);
        border: 1px solid #E7E7E7;
        display: block;
        width: 50px;
        height: 43px;
        line-height: 40px;
        background: #fff;
        border-radius: 3px;
        font-size: 26px;
        font-weight: bold;
        color: #4d75ff;
        cursor: pointer;
        margin-top: 10  px;
        // box-shadow: 0 0 12px #eee;
      }
      p {
        display: block;
        width: 100%;
        font-size: 12px;
        color: #666;
        border-top: 1px solid #E7E7E7;
        padding: 6px 6px;
        letter-spacing: 2px;
        text-align: center;
        cursor: pointer;
      }
      p:hover{
        color: #4d75ff;
      }
   }
  }
}
</style>
